<template>
  <div>
    <h3>父组件</h3>
    <div>count值：{{ count }}</div>
    <div>
      <input type="text" v-model="title" />
    </div>
    <hr />
    <!-- 
      子组件
      父组件中的数据在传给子组件中去显示
      父传子数据，通过自定义属性来实现数据的向子传递
      子组件通过【props】配置来接受父组件传过来的数据,当然也可以通过$attrs来接受
      如果你的属性定义在props配置中，则它就会在attrs对象中移除
      props的数据也是可以watch
      props的数据是单向数据流，但它是响应式的，父组件修改了，它也是跟着一切修改
      props中的数据子组件不能直接修改，只能是父组件来修改  单向数据流
     -->
    <!-- <child :num="count" :title="title" :user="user" /> -->
    <child :num="count" />
  </div>
</template>

<script>
import child from '@/components/child/index.vue'

export default {
  components: {
    child
  },
  data() {
    return {
      count: 100,
      title: '',
      user: { id: 1, name: '张三' }
    }
  }
}
</script>

<style lang="scss" scoped></style>
